<extend name="layouts/master"/>
<block name="js">
  <script src="__PUBLIC__/Admin/assets/js/view/w_article_function.js"></script>
  <script src="__PUBLIC__/Admin/assets/uploadify/jquery.uploadify.min.js"></script>
  <link rel="stylesheet" href="__PUBLIC__/Admin/assets/uploadify/uploadify.css">
  <script type="text/javascript" src="__PUBLIC__/Admin/assets/dist/js/wangEditor.min.js"></script>
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/assets/dist/css/wangEditor.min.css">
</block>
<block name="main">
  <div class="w_content">
    <header class="hero background-sky">
      <h1 class="hero-title ">文章分类管理</h1>
      <div class="clear"></div>
    </header>
    <div class="w_content_nav">
      <ol class="am-breadcrumb w-breadcrumb">
        <li><a href="#" class="am-icon-home">首页</a></li>
        <li><a href="#">分类</a></li>
        <li class="am-active">内容</li>
      </ol>
    </div>
    <div class="w_content_tab">
      <div class="w_content_content">
        <div style="clear:both"></div>
        <div style="height:20px"></div>
        <form class="am-form" action="{:U('article/edit')}" id="article_edit_from" enctype="multipart/form-data" method="post">
          <fieldset>
            <legend>文章添加</legend>
            <div class="w_article_edit">
              <div class="am-g">
                <div class="am-form-group">
                  <label>标题</label>
                  <input name="title" type="email" class="" value="{$val['title']}" placeholder="输入标题">
                  <input name="id" type="hidden" class="" value="{$val['id']}" ><label class="w_input_msg"></label>
                </div>
              </div>
              <div class="am-g">
                <div class="am-form-group am-form-file">
                  <label class="w_input_title">封面</label> <br>
                  <input  id="doc-form-file" name="file_upload" type="file" multiple="true">
                  <input  id="file" name="logo" type="hidden" >
                  <div id="layer-photos" style="<?= empty($val['logo'])?'display:none':''?>" class="layer-photos-demo  w_logo_view"><div class="w_clear_img"><i id="close_img" class=" am-icon-close"></i><img   layer-src="{$val['logo']}" src="{$val['logo']}" alt="logo" style='width:100%'/> </div></div>
                </div>

                <script>
                  $( function(){
                    $( "#doc-form-file" ).uploadify( {
                      'buttonText':'图片上传',
                      'buttonClass' : 'am-btn am-btn-danger am-btn-sm',
                      "swf": "__PUBLIC__/Admin/assets/uploadify/uploadify.swf",    //指定上传控件的主体文件
                      "uploader": '{:U("Upload/imgUpload")}' ,   //指定服务器端上传处理文件
                      onUploadSuccess: function (file, data, response) {
                        var data=$.parseJSON(data);
                        console.log(data);
                        if(data.status=='1'){
                          $('.layer-photos-demo').find('img').attr('src',data.msg);
                          $('.layer-photos-demo').find('img').attr('layer-src',data.msg);
                          $('#file').val(data.msg);
                          $('.w_logo_view').show();
                        }else{
                         layer.msg(data.msg);
                        }
                      }
                    } );

                      layer.photos({
                        photos: '#layer-photos'
                      });


                  } );
                </script>
              </div>
              <div class="am-g">
                <!--<div class="am-u-sm-3 w_input_title"><label>分类</label></div>-->
                <!--<div class="am-u-sm-6"> <input name="name" type="text" value="{$val.name}" placeholder="分类名称"></div>-->
                <!--<div class="am-u-sm-3"> <label class="w_input_msg"></label></div>-->
                <div class="am-form-group">
                  <label class="w_input_title">下拉多选框</label> <select name="category_id" id="doc-select-1">
                  <option   value="option1">请选择分类</option>
                  <volist name="category" id="data">
                    <option  <?= ($val['category_id']==$data['id'])?'selected=selected':''?>   value="{$data.id}">{$data.name}</option>
                  </volist>
                </select><label class="w_input_msg"></label>

                </div>
              </div>
              <div class="am-g">
                <div class="am-form-group">
                  <label class="w_input_title">简介</label> <input  value="{$val['intro']}" name="intro" type="email" class="" placeholder="输入标题"><label class="w_input_msg"></label>
                </div>
              </div>
              <div class="am-g">
                <div class="am-form-group">
                  <label class="w_input_title">内容</label>
                  <textarea id="textarea" style="height:400px;max-height:500px;">
{$val['content']}
                  </textarea>

                  <!--这里引用jquery和wangEditor.js-->
                  <script type="text/javascript">
                    $( function(){
                      var editor = new wangEditor( 'textarea' );
                      editor.config.uploadImgUrl = '{:U("Upload/editUpload")}';

                      editor.create();
                      // 获取编辑区域的html
                      var html = editor.$txt.html();

                      // 获取编辑区域的纯文本
                      var text = editor.$txt.text();

                      // 获取编辑区域的所有图片
                      var imgs = editor.$txt.find( 'img' );
                      // 上传图片（举例）

                      // 追加内容
                    } )
                  </script>
                  <label class="w_input_msg"></label>
                </div>
              </div>
              <div class="am-g">
                <div class="am-form-group">
                  <label class="w_input_title">标签</label> <input type="email" class="" placeholder="输入标题"><label class="w_input_msg"></label>
                </div>
              </div>
              <div class="am-g">
                <div class="am-form-group">
                  <label class="w_input_title">图集</label>  <input  id="doc-form-files" name="file_upload" type="file" multiple="true">
                  <div id="layer-photos_files" class="layer-photos-demo  w_images_view" style="display:none">
                    <volist name="images" id="data">
                      <img  layer-src="{$data['path']}" src="{$data['path']}" alt="images" style="width:10%"/>
                      <input type="hidden" name="images[]"  value="{$data['path']}">
                    </volist>
                  </div>
                </div>
              </div>
              <script>
                $( function(){
                  $( "#doc-form-files" ).uploadify( {
                    'buttonText':'图集上传',
                    'buttonClass' : 'am-btn am-btn-danger am-btn-sm',
                    "swf": "__PUBLIC__/Admin/assets/uploadify/uploadify.swf",    //指定上传控件的主体文件
                    "uploader": '{:U("Upload/imgUpload")}' ,   //指定服务器端上传处理文件
                    onUploadSuccess: function (file, data, response) {
                      var data=$.parseJSON(data);
                      console.log(data);
                      if(data.status=='1'){
                        var img='<img  layer-src="'+data.msg+'" src="'+data.msg+'" alt="images" style="width:10%"/> ';
                         img+='<input type="hidden" name="images[]"  value="'+data.msg+'">';
                        $("#layer-photos_files").append(img);
                        $('.w_images_view').show();
                      }else{
                        layer.msg(data.msg);
                      }
                    }
                  } );


                  $('#layer-photos_files').delegate('img','click',function(){
                    var html="<img style='width:100%' src='"+$(this).attr('src')+"'>";
                    layer.open({
                      type: 1,
                      title: false,
                      closeBtn: 0,
                      area: '516px',
                      skin: 'layui-layer-nobg', //没有背景色
                      shadeClose: true,
                      content:html
                    });
                  });

                } );
              </script>
              <div class="am-g">
                <div class="am-u-sm-12" style="text-align:center">
                  <button type="button" id="submit_update" class="am-btn am-btn-primary">提&nbsp;&nbsp;交</button>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</block>